<template>
  <!-- 职责 -->
  <div class="zz">
    <div class="zz-box">
      <div class="zz-title">组织机构</div>
    <!-- 轮播图 -->
    <van-swipe class="swiper" :autoplay="3000">
      <van-swipe-item>
        <div class="swiper_box">
          <img src="/pic&video/2003fd8fd2576e69c75c35e423ce8ec.jpg" alt="" />
        </div>
        <div class="swiper_text">
          <span>北京冬奥会和冬残奥会组委会成立大会召开</span>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="swiper_box">
          <img src="/pic&video/20211207193129.jpg" alt="" />
        </div>
        <div class="swiper_text">
          <span>北京获2022年冬奥会主办权 创造历史</span>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="swiper_box">
          <img src="/pic&video/6fc5c1f309c9eacd3fa3cc96a679920.jpg" alt="" />
        </div>
        <div class="swiper_text">
          <span>北京冬奥组委首钢办公区美景</span>
        </div>
      </van-swipe-item>
    </van-swipe>
    </div>
    <div id="cid">
      <h5>职责</h5>
      </div>
    <div class="wz">
      <p>
        2015年12月15日，北京2022年冬奥会和冬残奥会组织委员会成立。北京2022年冬奥会和冬残奥会组织委员会为独立事业法人，为承办冬奥会和冬残奥会的组织机构。北京2022年冬奥会和冬残奥会执行委员会为组织委员会的执行机构。北京2022年冬奥会和冬残奥会组织委员会负责组织、协调冬奥会和冬残奥会全部筹备和举办工作。
      </p>
    </div>
    <!-- 组织架构图 -->
    <div id="cid">
      <h5>组织架构图</h5>
    </div>
    <div class="zzjg">
      <div class="left-part">
        <img
          src="/pic&video/zzjg-title.png"
          style="height: 264; margin-top: 454px;"
          alt=""
        />
      </div>

      <!-- 遍历区域。。。。 -->
      <div v-for="i in 28" :key="i" class="mv_box">
        <div class="a">秘书行政部</div>
        <div class="white"></div>
      </div>
    </div>
    <!-- 吉祥物 -->
    <div class="con">
      <div class="mod-beas">
        <div class="title">北京2022年冬奥会和冬残奥会吉祥物</div>
        <div class="tu">
          <img src="/pic&video/bg_logoa.png" alt="" />
          <div class="con">
            <a class="logo1">
              <img src="/pic&video/3b675459-f4a2-4dc1-a32b-da81a9e08e2b.png" alt="" />
              <a class="logo2">
                <img
                  src="/pic&video/a329fda7-b53d-4279-a770-939ef29ec017.png"
                  alt=""
                />
              </a>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="con">
      <div class="mod-beas">
        <div class="title">吉祥物发布</div>
        <div class="bd">
          <ul class="news">
            <li>
              <h4>北京2022年冬奥会和冬残奥会吉祥物揭晓</h4>
              <p>2019-09-17</p>
            </li>
            <li>
              <h4>北京2022年冬奥会吉祥物阐释</h4>
              <p>2019-09-17</p>
            </li>
            <li>
              <h4>北京2022年冬残奥会吉祥物阐释</h4>
              <p>2019-09-17</p>
            </li>
          </ul>
          <!-- <div class="gd">点击更多</div> -->
        </div>
      </div>
    </div>
    <!-- 会徽 -->
    <!-- <div class="hh">
      <div class="place" style="padding-top: 5px">
        <div class="cap">
          <img src="/img/xz.png" alt=""/>
          <span>会徽</span>
        </div> -->
        <!-- 会徽轮播图 -->
        <!-- <van-swipe class="hhlb" :autoplay="3000">
          <van-swipe-item>
            <img src="/img/beijing.jpg" alt="" />
            <p>
              北京2022年冬残奥会会徽设计展现了汉字“飞”的动感和力度，巧妙地幻化成一个向前滑行、冲向胜利的运动员，
              同时形象化地表达了轮椅等冬残奥会特殊运动器械形态。上半部分线条刚劲曲折，下半部分柔美圆润，
              寓意运动员经过顽强拼搏、历经坎坷最终达到目标获得圆满成功。
            </p>
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/canaohui.jpg" alt="" />
            <p>
              北京2022年冬奥会会徽以汉字“冬”为灵感来源，运用中国书法的艺术形态,将厚重的东方文化底蕴与国际化的现代风格融为一体，
              呈现出新时代的中国新形象、新梦想，传递出新时代中国为办好北京冬奥会，圆冬奥之梦，实现“三亿人参与冰雪运动”目标，圆
              体育强国之梦，推动世界冰雪运动发展,为国际奥林匹克运动做出新贡献的不懈努力和美好追求。
            </p>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div> -->

    <!-- 宣传片 -->
    <!-- <div class="xcp">
      <div class="cap">
        <img src="/img/xz.png" alt="" />
        <span>宣传片</span>
      </div>
      <van-swipe class="hhlb" :autoplay="3000">
        <van-swipe-item>
          <div class="img_beijing">
            <img src="/img/beijing.jpg" alt="" />
            <div class="bofang">
              <a href=""><img src="/img/bofang.png" alt="" /></a></div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="img_canaohui">
            <img src="/img/canaohui.jpg" alt="" />
          <div class="bofang">
            <a href="">
            <img src="/img/bofang.png" alt="" /></a></div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div> -->
  </div>
</template>
<script>
</script>

<style >
.zz .zz-box .zz-title{
   line-height: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #00bafd;
  color: #249ddd;
  margin-top: 10px;
  font-weight: bolder;
}
.bgcc {
  color: white;
  z-index: 99;
  position: absolute;
}
/* .img_beijing {
  position: absolute;
  z-index: 2;
  position: relative;
} */
/* .img_canaohui {
  position: absolute;
  z-index: 2;
  position: relative;
} */
/* .bofang {
  width: 64px;
  height: 64px;
  position: absolute;
  z-index: 22;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: 77px;
} */

/* 播放 */
/* .bofang {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.zz .swiper_text {
  width: 100%;
  background-color: #202020c5;
  height: 40px;
  line-height: 40px;
  position: absolute;
  z-index: 99;
  color: rgb(255, 255, 255);
  text-align: center;
  margin-top: 133px;
}
.zz .swiper_text2 {
  width: 100%;
  background-color: #202020c5;
  height: 40px;
  line-height: 40px;
  position: absolute;
  z-index: 100;
  color: rgb(255, 255, 255);
  text-align: center;
  margin-top: 133px;
}

.zz .swiper_box {
  width: 375px;
  height: 173px;
  position: absolute;
}
/* .van-swipe__track {
  height: 30vh;
} */

/*   隐藏轮播图点点点样式 */
.zz .van-swipe__indicators {
  display: none !important;
}
.zz .swiper img {
  font-size: 50px;
  width: 100%;
}

.mv_box {
  margin-left: 130px;
}
.a {
  height: 40px;
  line-height: 40px;
  width: 180px;
  background-color: #0781cd;
  color: #fff;
}
.white {
  width: 180px;
  background-color: #fff;
  height: 8px;
}
.zz {
  width: 100%;
  height: auto;
  margin: 0px auto;
  position: relative;
  padding: 6px 0px;
  padding-top: 0;
  /* background-color: beige; */
}
#cid {
  box-sizing: border-box;
  border-bottom: 2px solid #0781cd;
  height: 68px;
  outline: none;
  margin-top: -30px;
}
#cid h5 {
  position: relative;
  display: inline-block;
  min-width: 100px;
  font-weight: bold;
  margin-left: 0px;
  color: #046bba;
  line-height: 70px;
}
.zz .wz {
  margin-top: 30ox;
  color: #666666;
  line-height: 26px;
  font-size: 12px;
  padding-right: 20px;
  margin-top: 15px;
  text-indent: 2em;
}
.zz .con {
  margin: 0 auto;
  width: 100%;
  margin-top: 15px;
}
.zz .mod-beas {
  position: relative;
}
.zz .mod-beas .title {
  line-height: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #00bafd;
  color: #249ddd;
  margin-top: 10px;
  font-weight: bolder;
}
/* 背景图样式 */
.tu img {
  width: 100%;
  height: 200px;
}
/* 吉祥物1样式 */
.tu .logo1 img {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -153px;
  width: 150px;
  height: 202px;
  display: block;
}
/* 吉祥物2样式 */
.tu .logo2 img {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: 14px;
  width: 123px;
  height: 202px;
  display: block;
}
.news {
  width: 100%;
  margin-bottom: 50px;

  overflow: hidden;
  margin-top: 15px;
}
.bd .news li h4 {
  font-size: 15px;
  font-weight: normal;
  color: #222222;
}
.news li p {
  width: 100%;
  height: 14px;
  color: #888888;
  font-size: 10px;
}
/* .gd {
  border: 1px solid #999999;
  margin-top: -33px;
  color: #999999;
  text-align: center;
  font-size: 10px;
} */
.zzjg {
  margin-top: 26px;
  position: relative;
}
.zz .zzjg .left-part {
  width: 59px;
  height: 20px;
}
/* 会徽样式 */
/* .zz .hh {
  position: relative;
  height: 333px;
  border-top: 5px solid gainsboro;
  margin-top: 55px; */
  /* background-color: aquamarine; */
/* } */
/* .cap {
  margin: 0 10px 0;
}
.cap .img {
  margin-top: 28px;
  padding-left: 10px;
  height: 26px;
}
.cap span {
  padding-bottom: 1.17rem;
  font-size: 20px;
  color: #252a36;
  margin: 0;
  font-style: italic;
  font-weight: bold;
} */

/* 会徽图片样式 */
/* .hhlb img {
  width: 100%;
} */

/* 会徽文字样式 */
/* .hhlb p {
  font-size: 10px;
  line-height: 19px;
  color: #333;
  display: block;
  margin-top: 15px;
} */

/* 宣传片 */
/* .xcp {
  width: 100%;
  position: relative; */
  /* background-color: wheat; */
  /* height: 388px;
  border-top: 5px solid gainsboro;
  margin-top: 80px;
} */
.zz .van-swipe__track {
  height: 30vh;
}
</style>